<template>
	<view class="active-list">
		<view class="active-item" v-for="(item, index) in list" :key="index" @click="bindBuyDeatil(item.id)">
			<view class="active-top-fx">已有{{ item.share_num }}人分享</view>
			<image class="active-img" :src="IMG_URL + item.img" mode="aspectFill"></image>
			<view class="active-bottom-mfn" @click.stop="bindFreeDetail(item.id)">点击免费拿</view>
		</view>
	</view>
</template>

<script>
const app = getApp();
export default {
	props: {
		list: {
			type: Array,
			default: () => []
		}
	},
	data() {
		return {
			IMG_URL: app.globalData.IMG_URL
		};
	},
	methods: {
		// 跳转猫咪详情
		bindBuyDeatil(id) {
			// this.$emit('buyDetail', id);
			uni.navigateTo({
				url:`/pages/buyDetail/buyDetail?id=${id}&type=4&active=active`
			})
		},
		// 跳转活动详情
		bindFreeDetail(id) {
			this.$emit('activeDetail', id);
		}
	}
};
</script>

<style scoped lang="scss">
.active-list {
	display: flex;
	justify-content: space-between;
	flex-wrap: wrap;
	.active-item {
		width: 324rpx;
		height: 340rpx;
		border-radius: 8rpx;
		position: relative;
		margin-bottom: 40rpx;
		.active-top-fx {
			width: 194rpx;
			height: 44rpx;
			background: #fa8384;
			border-radius: 0 0 20rpx 20rpx;
			font-size: 24rpx;
			font-weight: 400;
			color: #ffffff;
			line-height: 44rpx;
			text-align: center;
			position: absolute;
			top: 0;
			left: 50%;
			transform: translateX(-50%);
		}
		.active-img {
			width: 100%;
			height: 280rpx;
			border-radius: 8rpx 8rpx 0 0;
		}
		.active-bottom-mfn {
			width: 100%;
			height: 60rpx;
			background: #fa8384;
			border-radius: 0 0 8rpx 8rpx;
			font-size: 28rpx;
			font-family: PingFangSC-Semibold, PingFang SC;
			font-weight: 600;
			color: #ffffff;
			line-height: 60rpx;
			text-align: center;
			// position: absolute;
			// bottom: 0;
			// left: 0;
		}
	}
}
</style>
